<template>
	<div class="check-form-view">
		<van-form ref="form" @submit="onSubmit" @failed="onFailed" :show-error-message="false" class="form">
				<van-field v-model.trim="form.name" label="姓名" placeholder="姓名" />
				<van-field v-model.trim="form.mobile" label="手机号" type="tel" placeholder="手机号" maxlength="11" :rules="rules.mobile" />
			<div style="margin: 16px">
				<van-button round block color="#ff7400" native-type="submit">立即提交</van-button>
			</div>
		</van-form>
	</div>
</template>
<script>
	export default {
		name: 'check-form-view',
		props: {
			view: {
				type: Object,
				default: () => ({}),
			},
		},
		data() {
			return {
				form: {
					name: '',
					mobile: '',
				},
				rules: {
					name: [{ required: true, message: '请填姓名' }],
					mobile: [{ required: true, message: '请填手机号' }],
				},
			}
		},
		computed: {
			options() {
				return this.view.options
			},
		},
		methods: {
			// 表单错误
			onFailed({ errors }) {
				this.$toast({
					message: errors[0].message,
					position: 'top',
				})
			},
			clickSubmit() {
				this.$refs.form.submit()
			},
			async onSubmit() {
				// this.$toast(this.$api === undefined);
				// return;

				// const { name, mobile, address, ...args } = this.form
				// let form = {
				// 	name,
				// 	mobile,
				// 	address,
				// 	data_set: args,
				// 	// user_id
				// }
				// this.$emit('submit', form)
				this.$toast('提交成功！')
			},
		},
	}
</script>
<style lang="scss" scoped>
	.check-form-view {
        // padding-top: 20px;
        padding: 10px;
	}
</style>
